import React from 'react';
import { Row, Col, Card, Typography, Statistic, Space } from 'antd';
import { 
  UserOutlined, 
  CheckCircleOutlined, 
  WarningOutlined, 
  SyncOutlined,
  DatabaseOutlined,
  ApiOutlined
} from '@ant-design/icons';
import { useThemeStore } from '../../../stores/themeStore';
import { getTheme } from '../../../theme/config';
import { motion } from 'framer-motion';

const { Title, Text } = Typography;

const AdminDashboard: React.FC = () => {
  const { mode } = useThemeStore();
  const theme = getTheme(mode);

  const stats = [
    {
      title: '总用户数',
      value: 128,
      icon: <UserOutlined />,
      color: '#61dca3'
    },
    {
      title: '活跃用户',
      value: 86,
      icon: <CheckCircleOutlined />,
      color: '#1890ff'
    },
    {
      title: '待处理任务',
      value: 5,
      icon: <WarningOutlined />,
      color: '#faad14'
    },
    {
      title: '运行中任务',
      value: 3,
      icon: <SyncOutlined spin />,
      color: '#52c41a'
    },
    {
      title: '数据总量',
      value: '2.3TB',
      icon: <DatabaseOutlined />,
      color: '#722ed1'
    },
    {
      title: 'API调用次数',
      value: '15,420',
      icon: <ApiOutlined />,
      color: '#f5222d'
    }
  ];

  return (
    <div>
      <motion.div
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.3 }}
      >
        <Title level={3} style={{ color: theme.textPrimary, marginBottom: 24 }}>
          管理仪表板
        </Title>
      </motion.div>
      
      <Row gutter={[24, 24]}>
        {stats.map((stat, index) => (
          <Col xs={24} sm={12} md={8} key={index}>
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.3, delay: index * 0.1 }}
              whileHover={{ 
                y: -5, 
                scale: 1.02,
                transition: { duration: 0.2 } 
              }}
            >
              <Card
                style={{
                  background: theme.cardBackground,
                  borderColor: theme.cardBorder,
                  borderRadius: '12px',
                  boxShadow: theme.cardShadow,
                  height: '100%',
                  cursor: 'pointer',
                  transition: 'all 0.3s ease'
                }}
                bodyStyle={{ padding: '24px' }}
              >
                <Space direction="vertical" style={{ width: '100%' }}>
                  <div style={{ 
                    display: 'flex', 
                    alignItems: 'center', 
                    justifyContent: 'space-between' 
                  }}>
                    <motion.div 
                      style={{ 
                        width: 56, 
                        height: 56, 
                        borderRadius: '50%', 
                        background: `${stat.color}22`,
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center'
                      }}
                      whileHover={{ 
                        scale: 1.1,
                        transition: { duration: 0.2 } 
                      }}
                      whileTap={{ scale: 0.9 }}
                      animate={{ 
                        rotate: [0, 5, 0],
                        transition: { 
                          duration: 2,
                          repeat: Infinity,
                          repeatType: "reverse"
                        }
                      }}
                    >
                      {React.cloneElement(stat.icon, { 
                        style: { 
                          color: stat.color, 
                          fontSize: 28 
                        } 
                      })}
                    </motion.div>
                    <Statistic 
                      title={stat.title} 
                      value={stat.value} 
                      valueStyle={{ 
                        color: theme.textPrimary, 
                        fontSize: 28, 
                        fontWeight: 'bold' 
                      }} 
                    />
                  </div>
                </Space>
              </Card>
            </motion.div>
          </Col>
        ))}
      </Row>
      
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.5, delay: 0.6 }}
        style={{ marginTop: 32 }}
      >
        <Card
          style={{
            background: theme.cardBackground,
            borderColor: theme.cardBorder,
            borderRadius: '12px',
            boxShadow: theme.cardShadow
          }}
          bodyStyle={{ padding: '24px' }}
        >
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.3, delay: 0.7 }}
          >
            <Title level={4} style={{ color: theme.textPrimary, marginBottom: 24 }}>
              系统状态
            </Title>
          </motion.div>
          <div style={{ 
            display: 'grid', 
            gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', 
            gap: 20 
          }}>
            {[
              { label: 'CPU使用率', value: '42%', color: '#61dca3' },
              { label: '内存使用率', value: '68%', color: '#1890ff' },
              { label: '磁盘使用率', value: '24%', color: '#722ed1' },
              { label: '网络状态', value: '正常', color: '#52c41a' }
            ].map((item, index) => (
              <motion.div
                key={index}
                style={{ 
                  padding: 20, 
                  background: `${theme.glowColor}11`, 
                  borderRadius: 12,
                  textAlign: 'center',
                  border: `1px solid ${theme.cardBorder}`
                }}
                whileHover={{ 
                  y: -3,
                  scale: 1.02,
                  boxShadow: theme.hoverShadow,
                  transition: { duration: 0.2 } 
                }}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.3, delay: 0.7 + index * 0.1 }}
              >
                <motion.div
                  animate={{ 
                    scale: [1, 1.05, 1],
                    transition: { 
                      duration: 2,
                      repeat: Infinity,
                      repeatType: "reverse",
                      delay: index * 0.2
                    }
                  }}
                >
                  <Text style={{ color: theme.textPrimary, display: 'block', marginBottom: 8 }}>
                    {item.label}
                  </Text>
                  <Text style={{ 
                    color: item.color, 
                    fontSize: 24, 
                    fontWeight: 'bold' 
                  }}>
                    {item.value}
                  </Text>
                </motion.div>
              </motion.div>
            ))}
          </div>
        </Card>
      </motion.div>
    </div>
  );
};

export default AdminDashboard;